<template>
	<view class="content">
		<view class="amt-details_record">
			<view style="margin-bottom: 20rpx;">
				<view class="record_item">
					<view class="station_name">
						<text>协议名称:科技与狠货</text>
					</view>
					<view class="record-list">
						<view class="record-item_left">
							<view class="station_price" style="margin-bottom: 20rpx;">
								<text>已使用金额:12.33元</text>
							</view>
							<view class="record_info" style="margin-bottom: 20rpx;">
								<text>协议金额: 5.66元</text>
							</view>
						</view>
						<view class="record-item_right">
							<!-- <view class="record_amt" >
							</view>
							<view class="record_amt">
								<text>优惠额度：{{ item.discAmt }}元</text>
							</view> -->
							<view class="record_type" style="margin-bottom: 20rpx;">
								<view>剩余金额:8675.23元</view>
							</view>
							<view class="record_amt" style="margin-bottom: 20rpx;">
								<text>每升优惠：0.92元</text>
							</view>
						</view>
					</view>
					<view>
						<text>签约时间: 2021-01-21 23:12:43</text>
					</view>
					<view style="margin-top: 20px;text-align: right;">
						<button size="mini">查看消费记录</button>
					</view>
				</view>
				<!-- <view class="record-menu" @click="showMore(item, index)"
					:class="[item.flag && index == active ? 'show-more-click' : '']">
					<view class="img">
						<image :class="[item.flag && index == active ? 'iamge-active' : '']" src="../../static/dwon.png"
							mode=""></image>
					</view>
					<view class="list1">
						<view class="record_item1">
							<view class="line">
								<view>优惠额度</view>
								<view>{{ item.limitAmt }}元</view>
							</view>
						</view>
						<view class="record_item1">
							<view class="line">
								<view>每升优惠</view>
								<view>{{ item.discAmt }}元</view>
							</view>
						</view>
						<view class="record_item1">
							<view class="line">
								<view>签约时间</view>
								<view>{{ item.createdTime }}</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- <view class="example-body"><uni-load-more color="#418CE2" :status="status" :content-text="contentText" @clickLoadMore="clickLoadMore" /></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fuelHistData: [],
				param: {
					groupId: '',
					memberId: '',
					status: '',
					pageSize: 10,
					pageIndex: 1
				},
				totalPage: 0,
				statusTypes: [{
						value: 'more',
						text: '查看更多',
						checked: true
					},
					{
						value: 'loading',
						text: '加载中',
						checked: false
					},
					{
						value: 'noMore',
						text: '没有更多',
						checked: false
					}
				],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				isShowText: false,
				active: null
			};
		},
		methods: {
		}
	};
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;

		.amt-details_record {
			padding: 20rpx 32rpx 32rpx 32rpx;
			overflow-y: scroll;

			.record_item {
				padding: 40rpx 30rpx;
				background-color: #ffffff;
				border-radius: 8rpx;
				box-shadow: 0rpx 7rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);

				.station_name {
					color: #333333;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.record-list {
					display: -webkit-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					-webkit-justify-content: space-between;
					justify-content: space-between;

					// box-shadow: 0rpx 7rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
					// // border-radius: 8rpx;
					// border-top-left-radius: 8rpx;
					// border-top-right-radius: 8rpx;	
					.record-item_left {


						.station_price {
							// margin: 25rpx 0rpx;
							color: #333333;
						}

						.record_info {
							// color: #acacac;
							// font-size: 28rpx;
						}
					}

					.record-item_right {
						text-align: right;
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.record_vol {

							// padding-bottom: 30rpx;
							text {
								font-size: 28rpx;
								color: #000000;
							}
						}

						.record_type {
							display: flex;
							align-items: center;

							.status {
								color: #ffffff;
								font-size: 20rpx;
								border-radius: 40rpx;
								background: #c3f;
								padding: 6rpx 14rpx;
							}

							// padding-bottom: 30rpx;
							// text{
							// 	font-size: 28rpx;
							// 	color: #418CE2;
							// }
						}

						.record_amt {
							// font-weight: bold;
							// padding-bottom: 25rpx;
						}
					}
				}
			}

			.record-menu {
				width: 100%;
				// padding: 50rpx 0rpx;
				height: 100rpx;
				background: #f9f9f9;
				box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.2);
				transition: height 0.5s;
				-moz-transition: height 0.5s;
				/* Firefox 4 */
				-webkit-transition: height 0.5s;
				/* Safari and Chrome */
				-o-transition: height 0.5s;
				/* Opera */
				overflow: hidden;

				.img {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100rpx;
					background: #fff;

					image {
						width: 45rpx;
						height: 45rpx;
						transition: 0.5s;
						-moz-transition: 0.5s;
						/* Firefox 4 */
						-webkit-transition: 0.5s;
						/* Safari and Chrome */
						-o-transition: 0.5s;
						/* Opera */
					}

					.iamge-active {
						transform: rotate(-180deg);
					}
				}

				.list1 {
					padding: 20rpx 0rpx;

					.record_item1 {
						padding: 0rpx 30rpx;
						display: flex;
						justify-content: space-between;

						// border-bottom-left-radius: 8rpx;
						// border-bottom-right-radius: 8rpx;
						// .record-item_left {
						//     .station_unitprice {
						//         margin-bottom: 20rpx;
						//     }
						//     .station_member {
						//     }
						// }
						// .record-item_right {
						//     .record_rise {
						//         margin-bottom: 20rpx;
						//     }
						//     .record_card {
						//     }
						// }
						.line {
							padding: 15rpx 0rpx;
							border-bottom: 1rpx solid #e8e0e2;
							width: 100%;
							display: flex;

							view:nth-child(1) {
								width: 40%;
								color: #ada3a3;
								font-size: 30rpx;
							}

							view:nth-child(2) {
								font-size: 32rpx;
							}
						}
					}

					.record_item1:nth-last-child(1) {
						.line {
							border: none;
						}
					}
				}
			}

			.show-more-click {
				height: 350rpx;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
		}
	}
</style>